<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{number}}.{{title}}</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" charset="utf-8"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- <link rel="stylesheet" href="../css/single_question.css"> -->
    <link rel="stylesheet" href="../css/navbar.css">
    <style>
        /* 基本样式 */
        :root {
            --primary-color: #2d3e50;
            --secondary-color: #f9fafc;
            --accent-color: #2d8cf0;
            --hover-color: #1971c2;
            --text-dark: #333;
            --text-light: #666;
            --white: #ffffff;
            --shadow: rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--secondary-color);
            color: var(--text-dark);
            overflow-x: hidden;
            /* 禁止水平滚动条 */
        }

        .container {
            width: 100%;
            max-width: 100%;
            /* 使容器宽度充满整个屏幕 */
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            background-color: var(--primary-color);
            padding: 10px 20px;
            color: var(--white);
            font-size: 1.1em;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }

        .navbar .left,
        .navbar .center,
        .navbar .right {
            display: flex;
            align-items: center;
        }

        .navbar a {
            color: var(--white);
            text-decoration: none;
            margin: 0 10px;
        }

        .navbar a:hover {
            text-decoration: underline;
        }

        /* 内容区域：题目描述和代码编辑器 */
        .part1 {
            display: flex;
            margin-top: 70px;
            /* 防止导航栏遮挡内容 */
            padding: 20px;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .left_desc {
            width: 48%;
            /* 限制宽度，避免超出 */
            padding-right: 20px;
            overflow-y: auto;
        }

        .left_desc h3 {
            font-size: 1.6em;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .left_desc pre {
            font-size: 1em;
            color: var(--text-light);
            background-color: var(--white);
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 4px 8px var(--shadow);
        }

        .right_code {
            width: 48%;
            /* 限制宽度，避免超出 */
            padding-left: 20px;
        }

        #code {
            height: 600px;
            border: 1px solid var(--shadow);
            border-radius: 5px;
            box-shadow: 0 4px 8px var(--shadow);
        }

        #pre_code {
            display: none;
            /* 隐藏原始代码预览，只作为调试工具 */
        }

        /* 按钮样式 */
        .part2 {
            display: flex;
            justify-content: flex-end;
            padding: 20px;
            gap: 10px;
        }

        .btn-implement,
        .btn-submit {
            width: 120px;
            height: 50px;
            font-size: 1em;
            font-weight: bold;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-left: 15px;
        }

        .btn-implement {
            background-color: #ffffff;
            color: var(--text-dark);
            border: 2px solid var(--accent-color);
        }

        .btn-implement:hover {
            background-color: var(--hover-color);
            color: var(--white);
        }

        .btn-submit {
            background-color: #26bb9c;
            color: var(--white);
            border: none;
        }

        .btn-submit:hover {
            background-color: #1a9a7d;
        }

        /* 输出结果 */
        .result {
            margin-top: 10px;
            font-size: 0.9em;
            color: var(--text-dark);
            width: 100%;
            overflow-x: auto;
            /* 防止长内容超出显示区域 */
        }
    </style>
</head>

<body>

    <div class="container">
        <!-- 导航栏 -->
        <div class="navbar">
            <div class="left">
                <a href="/">首页</a>
                <a href="/all_questions.html">编程题库</a>
            </div>
            <div class="center">
                <a href="/html/job_seek.html">求职</a>
                <a href="/html/learning.html">学习</a>
                <a href="/html/discuss.html">讨论</a>
                <a href="/html/question_bank.html">知识题库</a>
                <a href="/html/ai_qa.html">AI问答</a>
            </div>
            <div class="right">
                <a href="/html/register.html">注册</a>
                <a href="/html/login.html">登录</a>
                <a href="/html/userInfo.html" class="toRight">个人信息</a>
            </div>
        </div>

        <!-- 内容区域：题目描述和代码编辑器 -->
        <div class="part1">
            <div class="left_desc">
                <h3><span id="number">{{number}}</span>. {{title}} <small>{{level}}</small></h3>
                <pre>{{desc}}</pre>
            </div>
            <div class="right_code">
                <!-- 显示题目的预览代码 -->
                <div id="code" class="ace_editor"></div>
                <pre id="pre_code">{{pre_code}}</pre>
            </div>
        </div>

        <!-- 操作区：执行和提交按钮 -->
        <div class="part2">
            <div class="result"></div>
            <button class="btn-implement" onclick="implement()">执行代码</button>
            <button class="btn-submit" onclick="submit()">提交代码</button>
        </div>
    </div>

    <script>
        // 初始化 ACE 编辑器
        var editor = ace.edit("code");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/c_cpp");
        editor.setFontSize(16);
        editor.getSession().setTabSize(4);
        editor.setReadOnly(false);
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });

        // 获取数据库返回的代码，进行反转义处理
        function decodePreCode(encodedCode) {
            return encodedCode.replace(/\\n/g, '\n')    // 将 '\\n' 转换为换行符
                .replace(/\\\"/g, '"')   // 将 '\\"' 转换为双引号
                .replace(/\\\\/g, '\\')  // 将 '\\\\' 转换为反斜杠
                .replace(/\\t/g, '\t');   // 将 '\\t' 转换为制表符（如果有需要）
        }

        // 假设你从服务器端获取到的预处理代码
        var pre_code = "{{pre_code}}";  // 从后端传递来的预处理代码

        // 对预处理代码进行反转义
        pre_code = decodePreCode(pre_code);

        // 将处理后的代码设置到 ACE 编辑器中
        editor.setValue(pre_code);

        // 提交代码的函数
        function submit() {
            var code = editor.getSession().getValue();  // 获取编辑器中的代码
            var number = $("#number").text();           // 获取题目编号
            var judge_url = "/judge/" + number;         // 设置请求 URL

            // 发起 AJAX 请求到后端进行代码判断
            $.ajax({
                method: 'POST',
                url: judge_url,
                dataType: 'json',
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({ 'code': code, 'input': '' }),  // 发送代码和输入（此处暂空）
                success: function (data) {
                    show_result(data);  // 显示结果
                }
            });
        }

        // 显示提交结果的函数
        function show_result(data) {
            var result_div = $(".result");   // 获取结果展示的容器
            result_div.empty();               // 清空之前的结果

            // 显示返回的原因或错误信息
            $("<p>", { text: data.reason }).appendTo(result_div);

            // 如果状态是成功，则显示标准输出和错误输出
            if (data.status === 0) {
                $("<pre>", { text: data.stdout }).appendTo(result_div);  // 显示标准输出
                $("<pre>", { text: data.stderr }).appendTo(result_div);  // 显示标准错误输出
            }
        }
    </script>

</body>


</html>